<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外网-服务指南列表</title>
    <link rel="stylesheet" href="src/images/reset.css">

    <link rel="stylesheet" href="src/css/normalize.css">


    <link rel="stylesheet" href="src/css/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" href="src/css/serviceGuide.css">


</head>
<body>

   	<div class="page-home-net serviceGuide-wrap">
        <!--轮播图-->
        <div class="swiper-container banner-wrap">
          <div class="swiper-wrapper">
            <div class="swiper-slide slide1">
                <img src="src/images/banner.png" alt="">
            </div>
            <div class="swiper-slide slide2">
                <img src="src/images/banner.png" alt="">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
		<!-- 站内导航 -->
        <div class="position_wrap">
            <div class="w1200 list-header">
                <img src="src/images/mark.png" alt="" class="list-header-mark">
                <span class="list-header-title">首页</span>
                <span>&gt;</span>
                <span class="list-header-active">服务指南</span>
            </div>
        </div>
        <!-- 主要服务-常见问题 -->
        <div class="service_detail">
        	<!-- 主要服务介绍 -->
            <div class="section_1">
                <div class="w1200">
                    <div class="titlemodel">
                        <h2 class="h2tit">主要服务介绍</h2>
                        <div class="desc">服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍</div>
                    </div>
                    <div class="list">
                        <ul>
                            <li>
                                <div class="title">
                                    <div class="imgbox">
                                        <img src="src/images/guide-title1.png" alt="">
                                    </div>
                                    <div class="title2">
                                        银行<br>办理
                                    </div>
                                </div>
                                <dl>
                                    <dd>
                                        <div class="item">
                                            <p id="scrollobj" style="white-space:nowrap;overflow:hidden;width:129px;margin: auto;display: inline-block;" onmouseover="stop()" onmouseout="start()"><a
                                                    href="" style="padding-right:20px;">港讯通APP安装和证书下载</a>
                                            </p>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">企业收费目录项目和模板配置流程</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">在线培训业务操作流程</a>
                                            </div>
                                        </div>

                                    </dd>
                                </dl>
                                <span class="more">
                                    <a href="">更多</a><img src="src/images/more1.png" alt="">
                                </span>
                            </li>
                            <li>
                                <div class="title">
                                    <div class="imgbox">
                                        <img src="src/images/guide-title2.png" alt="">
                                    </div>
                                    <div class="title2">
                                        缴费<br>流程
                                    </div>
                                </div>
                                <dl>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">港讯通APP安装和证书下载</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">企业收费目录项目和模板配置流程</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">在线培在线培</a>
                                            </div>
                                        </div>

                                    </dd>
                                </dl>
                                <span class="more">
                                    <a href="">更多</a><img src="src/images/more2.png" alt="">
                                </span>
                            </li>
                            <li>
                                <div class="title">
                                    <div class="imgbox">
                                        <img src="src/images/guide-title3.png" alt="">
                                    </div>
                                    <div class="title2">
                                        收费<br>流程
                                    </div>
                                </div>
                                <dl>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">港讯通APP安装和证书下载</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">企业收费目录项目和模板配置流程</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">在线培在线培</a>
                                            </div>
                                        </div>

                                    </dd>
                                </dl>
                                <span class="more">
                                    <a href="">更多</a><img src="src/images/more3.png" alt="">
                                </span>
                            </li>
                            <li>
                                <div class="title">
                                    <div class="imgbox">
                                        <img src="src/images/guide-title4.png" alt="">
                                    </div>
                                    <div class="title2">
                                        通关<br>流程
                                    </div>
                                </div>
                                <dl>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">港讯通APP安装和证书下载</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">企业收费目录项目和模板配置流程</a>
                                            </div>
                                        </div>
                                    </dd>
                                    <dd>
                                        <div class="item">
                                            <div class="str1 str_wrap">
                                                <a href="">在线培在线培</a>
                                            </div>
                                        </div>

                                    </dd>
                                </dl>
                                <span class="more">
                                    <a href="">更多</a><img src="src/images/more4.png" alt="">
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 常见问题 -->
            <div class="section_2">
                <div class="w1200">
                    <div class="titlemodel">
                        <h2 class="h2tit">常见问题</h2>
                        <div class="desc">服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍</div>
                    </div>
                    <div class="tab_all clearfix">
                    	<div class="hd_all-bg"></div>
                    	<!-- tab-左侧 -->
                        <div class="hd_all fl">
                            <h2 class="h2tit">常见问题</h2>
                            <div class="list">
                                <ul class="tab-ul">
                                    <li class="current">
                                        <a href="javascript:;">
                                            <span>交通费用（1）</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            
                                            <span>设施管理（2）</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tel">
                                            
                                            <span>安全监督<br>
                                            应急管理（2）</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <span>缴费（1）</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            收费（2）
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- tab右侧 -->
                        <div class="bd_list fl">
                        	<!-- 右侧顶部查询 -->
                        	<div class="bd-right-search">
                        		<form action="">
                        			<span class="input-outer"><input type="text" placeholder="例如：价格" class="input-submit"></span>
                        			<input type="submit" value="查询" class="btn-submit">
                        		</form>
                        	</div>
                        	<!-- tab-主体项列表 -->
                            <div class="model">
                                <div class="list">
                                    <ul>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用何进行港口收取费用何进行港口收取费用何进行港口收取费用何进行港口收取费用何进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;
                                                            <span style="color: rgb(51, 51, 51);">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营ggggggfsfsfdsfasdsadggggggfsfsfdsfasdsadggggggfsfsfdsfasdsadggg gggfsffdsfssfdssfdsfasdsadffdsadasd服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pagesize">
                                    <ul>
                                        <li><a href="#" class="current">首页</a></li>
                                        <li><a href="#">上一页</a></li>
                                        <li><a href="#">下一页</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="model">
                                <div class="list">
                                    <ul>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用进行港口收取费用进行港口收取费用进行港口收取费用进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;<span style="color: rgb(51, 51, 51); font-family: &quot;Microsoft Yahei&quot;;">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用进行港口收取费用进行港口收取费用进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;<span style="color: rgb(51, 51, 51); font-family: &quot;Microsoft Yahei&quot;;">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pagesize">
                                    <ul>
                                        <li><a href="#" class="current">首页</a></li>
                                        <li><a href="#">上一页</a></li>
                                        <li><a href="#">下一页</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="model">
                                <div class="list">
                                    <ul>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;<span style="color: rgb(51, 51, 51); font-family: &quot;Microsoft Yahei&quot;;">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用进行港口收取费用进行港口收取费用进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;<span style="color: rgb(51, 51, 51); font-family: &quot;Microsoft Yahei&quot;;">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pagesize">
                                    <ul>
                                        <li><a href="#" class="current">首页</a></li>
                                        <li><a href="#">上一页</a></li>
                                        <li><a href="#">下一页</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="model">
                                <div class="list">
                                    <ul>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;<span style="color: rgb(51, 51, 51); font-family: &quot;Microsoft Yahei&quot;;">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pagesize">
                                    <ul>
                                        <li><a href="#" class="current">首页</a></li>
                                        <li><a href="#">上一页</a></li>
                                        <li><a href="#">下一页</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="model">
                                <div class="list">
                                    <ul>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;<span style="color: rgb(51, 51, 51); font-family: &quot;Microsoft Yahei&quot;;">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="title_infor clearfix">
                                                <div class="title">如何进行港口收取费用？</div>
                                                <div class="time">2018-09-10</div>
                                                <div class="updown-icon"><img src="src/images/down.png" alt=""></div>
                                            </div>
                                            <div class="show_up">
                                                <div class="slide_down">
                                                	<div class="words-img fl">
                                                		<img src="src/images/answer.png" alt="">
                                                	</div>
                                                    <div class="words">
                                                    	<div class="triangle"></div>
                                                        <div class="TRS_Editor">&nbsp;<span style="color: rgb(51, 51, 51); font-family: &quot;Microsoft Yahei&quot;;">为深入贯彻落实党中央、国务院全面深化改革，清理规范涉企经营服务性收费、减轻企业负担的决策部署，充分发挥市场对资源配置的决定性作用和更好发挥政府作用，促进港口更好地服务国民经济、对外贸易和航运事业发展，依据《港口法》《价格法》和《中央定价目录》，交通运输部会同国家发展改革委对《港口收费计费办法》。</span><a href="" class="enter_detail">【查看详情】</a></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pagesize">
                                    <ul>
                                        <li><a href="#" class="current">首页</a></li>
                                        <li><a href="#">上一页</a></li>
                                        <li><a href="#">下一页</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="src/js/jquery-1.10.1.min.js"></script>
    <script src="src/js/idangerous.swiper.min.js"></script>

    <script language="javascript">
        // banner
        var mySwiper = new Swiper ('.banner-wrap', {
	        pagination: '.swiper-pagination',
	        paginationClickable :true,
	        autoplay : 3000,
	        loop: true,
	        speed:300,
	        autoplayDisableOnInteraction : false,
	        onProgressChange: function(swiper){
	        	for (var i = 0; i < swiper.slides.length; i++){
			        var slide = swiper.slides[i];
			        var progress = slide.progress;
			        var translate = progress*swiper.width;  
			        var opacity = 1 - Math.min(Math.abs(progress),1);
			        slide.style.opacity = opacity;
			        swiper.setTransform(slide,'translate3d('+translate+'px,0,0)');
		        }
	        },
	        onTouchStart:function(swiper){
		        for (var i = 0; i < swiper.slides.length; i++){
		        	swiper.setTransition(swiper.slides[i], 0);
		        }
	        },
	        onSetWrapperTransition: function(swiper, speed) {
		        for (var i = 0; i < swiper.slides.length; i++){
		        	swiper.setTransition(swiper.slides[i], speed);
		        }
	        }
        });  


        // 常见问题-显示隐藏
        $('.service_detail .section_2 .bd_list .model .list li .title_infor').click(function(){
            $(this).parent().find('.slide_down').slideToggle();
            $(this).parent().toggleClass('current');
        })

        $('.bd_list > .model').eq(0).children("li").removeClass("current");
        $('.bd_list > .model').eq(0).find('.slide_down').eq(0).show();


        var model_list_title_one = "";
        var model_list_title_two = "";
        $('.title_infor .title').each(function(){
            model_list_title_one = $(this).text().substr(0, 1);
            model_list_title_two = $(this).text().substr(1);
            $(this).html('<strong>'+model_list_title_one+'</strong>'+model_list_title_two);
        })


        // tab
		$('.bd_list .model:gt(0)').hide();
	    var hdw = $('.hd_all ul.tab-ul').children("li");
	    hdw.click(function() {
	        $(this).addClass('current').siblings().removeClass("current");
	        var hdw_index = hdw.index(this);
	        $('.bd_list > .model').eq(hdw.index(this)).fadeIn().siblings(".model").hide();

            $('.bd_list > .model').eq(hdw.index(this)).children("li").removeClass("current");
            $('.bd_list > .model').eq(hdw.index(this)).find('.slide_down').eq(0).show();
	    });


        // 文章显示4行(还待修改)
        $('.words .TRS_Editor').text($('.words .TRS_Editor').text().substring(0,180)+'....');

    </script>


    <script src="src/js/jquery-1.10.1.min.js"></script>


    <script>
        function scroll(obj) {
            var tmp = (obj.scrollLeft)++;
            //当滚动条到达右边顶端时
            if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
            //当滚动条滚动了初始内容的宽度时滚动条回到最左端
            if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
        }


        var a =    setInterval("scroll(document.getElementById('scrollobj'))",20);
        function stop(){
            clearInterval(a);
        }
        function start(){
            a=setInterval("scroll(document.getElementById('scrollobj'))",30);
        }


    </script>

</body>
</html>